import util from "@/assets/js/util";
import http from "@/axios/http";
import $tip from "@/components/able_mod/AbToolTip";
var wmi_base_html = ''
// 创建路线
async function create(fm,e) {
  if (e.length <=1) {
    $tip.message.open("至少需要两个点才能生成路线",2000,'warning')
    return fm
  }
  const fp = [e[0].latitude,e[0].longitude]
  const tp = [e[e.length - 1].latitude,e[e.length - 1].longitude]
  const ways = ['driving','walking','bicycling','ebicycling','transit']
  const url = `https://apis.map.qq.com/ws/direction/v1/${ways[1]}/?from=${fp[0]},${fp[1]}&to=${tp[0]},${tp[1]}&key=${util.TMAP_KEY}`
  // https://apis.map.qq.com/ws/direction/v1/driving/?from=39.984039,116.307630&to=39.977263,116.337063&output=jsonp&callback=cb&key=R5EBZ-5QIE4-4RWU5-XX2U5-W33YK-2JB3V

  let r = await http.jsonpAction(url)
  console.log(r)
  // if (r.status == 0 && r.message == 'query ok') {
  if (r.status == 0 && r.message == 'Success') {
    return cb(r)
  } else {
    let _msg = r.message || '路线创建失败'
    if (_msg == '起终点坐标错误') _msg = '起终点距离太短，无法生成路线'
    $tip.message.open(_msg,2000,'warning')
    return fm
  }

  //定义请求回调函数，在此拿到计算得到的路线，并进行绘制
  function cb(ret){
    var coords = ret.result.routes[0].polyline, pl = [];
    //坐标解压（返回的点串坐标，通过前向差分进行压缩）
    var kr = 1000000;
    for (var i = 2; i < coords.length; i++) {
      coords[i] = Number(coords[i - 2]) + Number(coords[i]) / kr;
    }
    //将解压后的坐标放入点串数组pl中
    for (var i = 0; i < coords.length; i += 8) {
      pl.push(new TMap.LatLng(coords[i], coords[i+1]));
    }
    if (pl.length <= 1) {
      if (pl.length == 0) pl.push(new TMap.LatLng(fp[0], fp[1]))
      if (pl.length == 1) pl.push(new TMap.LatLng(tp[0], tp[1]))
    }
    if (fm.wayPath) fm.wayPath = null
    fm.wayPath = pl
    
    //创建 MultiPolyline显示折线
    if (fm.wayPolyline) fm.wayPolyline.setMap(null)
    fm.wayPolyline = new TMap.MultiPolyline({
      id: 'polyline-layer', //图层唯一标识
      map: fm.map,//绘制到目标地图
      //折线样式定义
      styles: {
        'style_blue': new TMap.PolylineStyle({
          color: '#3777FF', // 线填充色
          width: 4, // 折线宽度
          borderWidth: 2, // 边线宽度
          borderColor: '#FFF', // 边线颜色
          lineCap: 'round', // 线端头方式
          eraseColor: '#ccc',  //行进路线经过的颜色
          showArrow: true,
        }),
        'style_gray': new TMap.PolylineStyle({
          color: '#ccc', // 线填充色
          width: 4, // 折线宽度
          borderWidth: 2, // 边线宽度
          borderColor: '#FFF', // 边线颜色
          lineCap: 'round', // 线端头方式
        }),
      },
      //折线数据定义
      geometries: [
        {
          'id': 'pl_1',//折线唯一标识，删除时使用
          'styleId': 'style_blue',//绑定样式名
          'paths': pl
        },
        {
          'id': 'erasePath',//行进路线id
          'styleId': 'style_blue',//绑定样式名
          'paths': pl
        },
      ]
    })

    //标记起终点marker
    if (fm.wayMarker) fm.wayMarker.setMap(null)
    fm.wayMarker = new TMap.MultiMarker({ 
      id: 'marker-layer',
      map: fm.map,
      styles: {
        'car': new TMap.MarkerStyle({
          'width': 40,  //小车图片宽度（像素）
          'height': 40, //高度
          'anchor': {   //图片中心的像素位置（小车会保持车头朝前，会以中心位置进行转向）
            x: 20,y: 20,
          },
          'faceTo': 'map',  //取’map’让小车贴于地面，faceTo取值说明请见下文图示
          'rotate': 180,    //初始小车朝向（正北0度，逆时针一周为360度，180为正南）
          'src': 'https://mapapi.qq.com/web/lbs/javascriptGL/demo/img/car.png',
        }),
        "start": new TMap.MarkerStyle({
          "width": 25,
          "height": 35,
          "anchor": { x: 16, y: 50 },
          "src": 'https://mapapi.qq.com/web/lbs/javascriptGL/demo/img/start.png'
        }),
        "end": new TMap.MarkerStyle({
          "width": 25,
          "height": 35,
          "anchor": { x: 16, y: 50 },
          "src": 'https://mapapi.qq.com/web/lbs/javascriptGL/demo/img/end.png'
        })
      },
      geometries: [
        {    
          "id": 'car',
          "styleId": 'car',
          "position": new TMap.LatLng(fp[0],fp[1])
        },
        {
          "id": 'start',
          "styleId": 'start',
          "position": new TMap.LatLng(fp[0],fp[1])
        }, {
          "id": 'end',
          "styleId": 'end',
          "position": new TMap.LatLng(tp[0],tp[1])
        }
      ]
    })
    fm.map.panTo(new TMap.LatLng(fp[0],fp[1]))
    wmi_base_html = `<div>
        <i style="font-size: 14px;color: #666;margin-right: 3px;font-style: normal;">从</i>
        <i style="color: #333;font-style: normal;">${e[0].title}</i>
      </div>
      <div>
        <i style="font-size: 14px;color: #666;margin-right: 3px;font-style: normal;">到</i>
        <i style="color: #333;font-style: normal;">${e[1].title}</i>
      </div>
    `
    const wmi = document.getElementById('WAY_MOVE_INFO')
    if (wmi) wmi.innerHTML = wmi_base_html
    return fm
  }
}
// 销毁路线
function destroy(fm) {
  if (fm.wayMarker) fm.wayMarker.setMap(null)
  if (fm.wayPolyline) fm.wayPolyline.setMap(null)
  if (fm.wayPath) fm.wayPath = null
  return fm
}
// 路线播放初始化
var isMoving = false;
function moveInit(fm,flag) {
  let roation;
  let position;
  if (flag == 'follow') {
    // 跟随视角 
    fm.wayMarker.on('move_ended', function () {
      isMoving = false;
    });
    fm.wayMarker.on('move_stopped', function (e) {
      isMoving = false;
    });
    fm.wayMarker.on('moving', function (e) {
      if (e.car) {
        roation = TMap.geometry.computeHeading(
          e.car.passedLatLngs[e.car.passedLatLngs.length - 2],
          e.car.passedLatLngs[e.car.passedLatLngs.length - 1]
        );
        position = TMap.geometry.computeDestination(fm.wayMarker.getGeometryById('car').position, roation, 60);
      }
      fm.map.easeTo(
        {
          center: position,
          rotation: e.car.angle && e.car.angle,
          zoom: 20,
          pitch: 70,
        },
        {
          duration: 300,
        }
      );
      // 移动路线置灰
      fm.wayPolyline.updateGeometries([
        {
          id: 'erasePath',
          styleId: 'style_gray',
          paths: e.car && e.car.passedLatLngs,
        },
      ])
      distanceShow(e)
    })
  } else {
    // 俯视视角
    fm.wayMarker.on('moving', (e) => {
      var passedLatLngs = e.car && e.car.passedLatLngs;
      if (passedLatLngs) {
        // console.log(passedLatLngs)
        fm.wayPolyline.eraseTo(
          'erasePath',
          passedLatLngs.length - 1,
          passedLatLngs[passedLatLngs.length - 1]
        );
      }
      distanceShow(e)
    })
  }
  // 解析数字
  function parseNumber(value, num) {
    return parseFloat(value).toFixed(num);
  }
  // 显示移动距离
  function distanceShow(e) {
    // 计算当前移动距离
    let currentDistance = TMap.geometry.computeDistance(e.car.passedLatLngs);
    // 移动过程中更新小车已行驶距离
    // console.log('当前小车行驶距离：' + parseNumber(currentDistance, 2) + '米');
    // 移动过程中更新小车当前坐标
    let movingLatLng = e.car.passedLatLngs[e.car.passedLatLngs.length - 1];
    // console.log('当前小车坐标：' + parseNumber(movingLatLng.lat, 6) + ',' + parseNumber(movingLatLng.lng, 6));
    const wmi = document.getElementById('WAY_MOVE_INFO')
    if (wmi) wmi.innerHTML = wmi_base_html+`
      <div>
        <i style="font-size: 14px;color: #666;font-style: normal;">已行驶：</i>
        ${parseNumber(currentDistance, 2)}
        <i style="font-size: 14px;color: #666;font-style: normal;">米</i>
      </div>
      <div>
        <i style="font-size: 14px;color: #666;font-style: normal;">纬度：</i>
        ${parseNumber(movingLatLng.lat, 6)}
      </div>
      <div>
        <i style="font-size: 14px;color: #666;font-style: normal;">经度：</i>
        ${parseNumber(movingLatLng.lng, 6)}
      </div>
    `
  }
}
// 播放路线
function move(fm,speed,flag) {
  if (isMoving) return
  if (!fm.wayPath) {
    $tip.message.open("没有路线可以播放",2500,'warning')
    return
  }
  moveInit(fm,flag)
  if (flag == 'follow') {
    fm.map.easeTo(
      {
        zoom: 20,
        rotation: 180,
        pitch: 80,
      },
      {
        duration: 1000,
      }
    );
    fm.map.on('idle', carMove)
  } else {
    speed = speed*5
    carMove()
  }
  function carMove() {
    fm.map.off('idle', carMove)
    fm.wayMarker.moveAlong({ 
      "car": {    //设置让"car"沿"path"移动，速度speed公里/小时
          path: fm.wayPath,
          speed,
        }
      }, {
        autoRotation:true   //车头始终向前（沿路线自动旋转）
      }
    )
    isMoving = true
  }
}
// 结束播放
function stop(fm) {
  if (!fm.wayMarker) return
  fm.wayMarker.stopMove()
  fm.map.easeTo({
    rotation: 0,
    pitch: 0,
  })
  isMoving = false
  const wmi = document.getElementById('WAY_MOVE_INFO')
  if (wmi) wmi.innerHTML = wmi_base_html
}
// 暂停播放
function pause(fm,f) {
  if (!fm.wayMarker) return
  if (f) fm.wayMarker.pauseMove()
  else fm.wayMarker.resumeMove() 
}


export default {
  create,destroy,move,stop,pause
}